<template>
  <div>
    <div v-for="(item, index) in menuData" :key="index">
      <!-- 思路: 有子元素使用el-submenu 没有子元素使用el-menu-item -->
      <el-submenu :index="item.url+''" v-if="item.children && item.children.length > 0">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{ item.menuName }}</span>
        </template>
        <!--        递归调用-->
        <Menu :menuData="item.children"></Menu>
      </el-submenu>
      <el-menu-item :index="item.url+''" v-else>
        <i :class="item.icon"></i>
        <span>{{ item.menuName }}</span>
      </el-menu-item>
    </div>
  </div>
</template>

<script>
export default {
  name: "Menu",
  props: {
    menuData: {
      type: Array,
      default: []
    }
  }
}
</script>

<style scoped>

</style>